import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import React, { useLayoutEffect } from "react";
import "./index.css";
function PictureDisplay() {
  gsap.registerPlugin(ScrollTrigger);

  // 监听滚动事件
  useLayoutEffect(() => {
    const parallaxElements = document.querySelectorAll(".image");

    parallaxElements.forEach((element) => {
      gsap.fromTo(
        element,
        {
          backgroundPositionY: `-${window.innerHeight / 2}px`,
        },
        {
          backgroundPositionY: `${window.innerHeight / 2}px`,
          scrollTrigger: {
            ease: "none",
            yoyo: true, 
            trigger: element,
            scrub: true, // 平滑滚动效果
            start: "top bottom",
            end: "bottom top",
          },
        }
      );
    });
  }, []);
  return (
    <div className="image-container">
      <div className="image1 image"></div>
      <div className="image2 image"></div>
      <div className="image3 image"></div>
    </div>
  );
}

export default PictureDisplay;
